<template>
  <div class="threelevepage tapStyle secondary-page-mode">

    <div class="secondary-toolbar">
           <span>时间选择 : </span>
           <div class="layoutBox" style="width:220px">
            <el-date-picker :picker-options="startDateOpt()"  @change='dateChange' v-model="dateRange" value-format='yyyy-MM-dd' type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>&emsp;&emsp;
          <el-button @click="searchData"><i class="iconfont icon-sousuo"></i>查询</el-button>
           <yf-calender :mn='mn' @getchildDate='getchildDate'></yf-calender>
           <el-button color='#E5C33E' @click="auditClick">审核</el-button>
           <el-button color='#58AFA5' @click="reject">驳回</el-button>
           <el-button color='#0088BB' @click="effcodeClick">有效标记</el-button>
           <el-button color='#0088BB' @click="invcodeClick">无效标记</el-button>
           <el-button color='#58AFA5'>补传日历</el-button>
            <div class="lengbox layoutBox">
                  <span>已审核</span>
                  <span>存疑数据</span>
                  <span>无效数据</span>
                  <span>差异数据</span>
            </div>
    </div>
    <div class="containerbox currency-mode-wrap" style="height:calc(100% - 65px)">
        <div v-if="noDataState" class="no-data-wrap small">
              <p>暂无数据</p>
        </div>
        <div class="tablebox" style="height:100%" v-loading="loading"
               element-loading-text="加载中"
               element-loading-spinner="loading-type-a"
               element-loading-background="rgba(255, 255, 255, 1)">
          <el-table
            :data="tableData"
            border
            height="100%">
            <el-table-column
                            type="index"
                            label="序号"
                            :index="indexMethod"
                            width="50">
            </el-table-column>
            <el-table-column
                           label='监测时间'
                           width="140">
                              <template slot-scope="scope">
                                <div>
                                   <span>{{scope.row['time'].value}}</span>
                                </div>
                              </template>
            </el-table-column>
            <el-table-column v-for="(item,key) in tableHead" :key="key" v-if="item.prop != 'time'"
                            :label="item.label1">
                              <el-table-column
                                :label="item.label2"
                                :prop="item.prop">
                                  <template slot-scope="scope">
                                    <div  v-if="showChecked && scope.row[item.prop].value != null && scope.row[item.prop].operationAudit == true" :class="{'inv':scope.row[item.prop].colorStatus==2,'doub':scope.row[item.prop].colorStatus==3,'exa':scope.row[item.prop].colorStatus==4,'diff':scope.row[item.prop].colorStatus==5}">
                                        <el-popover
                                            placement="bottom"
                                            width="50"
                                            v-model='scope.row[item.prop].statusp'
                                            trigger="click">
                                            <div class="operaBox" v-if="codeMes == '设置有效数据' && scope.row[item.prop].colorStatus != 1">
                                                <p @click="setData(scope.row,item.prop)" >{{codeMes}}</p>
                                                <p @click="detailClick(scope.row,item.prop)">详细情况</p>
                                                <p @click="rowChecked(scope.row,item.prop)">行反选</p>
                                                <p @click="colChecked(scope.row,item.prop)">列反选</p>
                                            </div>
                                            <div class="operaBox" v-if="codeMes == '设置有效数据' && scope.row[item.prop].colorStatus == 1">
                                                <p @click="detailClick(scope.row,item.prop)">详细情况</p>
                                            </div>
                                            <div class="operaBox" v-if="codeMes == '设置无效数据' && scope.row[item.prop].colorStatus != 2">
                                                <p @click="setData(scope.row,item.prop)" >{{codeMes}}</p>
                                                <p @click="detailClick(scope.row,item.prop)">详细情况</p>
                                                <p @click="rowChecked(scope.row,item.prop)">行反选</p>
                                                <p @click="colChecked(scope.row,item.prop)">列反选</p>
                                            </div>
                                            <div class="operaBox" v-if="codeMes == '设置无效数据' && scope.row[item.prop].colorStatus == 2">
                                                <p @click="detailClick(scope.row,item.prop)">详细情况</p>
                                            </div>
                                            <span class="factorspan" slot="reference" v-if="codeMes == '设置有效数据' && scope.row[item.prop].colorStatus != 1">
                                                 <el-checkbox v-model="scope.row[item.prop].status"  @change='checked(scope.row[item.prop])'>{{ scope.row[item.prop].value}}</el-checkbox>
                                            </span>
                                            <span class="factorspan" slot="reference" v-if="codeMes == '设置有效数据' && scope.row[item.prop].colorStatus == 1">
                                                  {{ scope.row[item.prop].value}}
                                                   <i class="el-icon-question" v-if="scope.row[item.prop].colorStatus == 2 || scope.row[item.prop].colorStatus == 3" :title="scope.row[item.prop].remark"></i>
                                            </span>
                                            <span class="factorspan" slot="reference" v-if=" codeMes == '设置无效数据' && scope.row[item.prop].colorStatus != 2">
                                                 <el-checkbox v-model="scope.row[item.prop].status"  @change='checked(scope.row[item.prop])'>{{ scope.row[item.prop].value}}</el-checkbox>
                                            </span>
                                             <span class="factorspan" slot="reference" v-if="codeMes == '设置无效数据' && scope.row[item.prop].colorStatus == 2">
                                                  {{ scope.row[item.prop].value}}
                                                   <i class="el-icon-question" v-if="scope.row[item.prop].colorStatus == 2 || scope.row[item.prop].colorStatus == 3" :title="scope.row[item.prop].remark"></i>
                                            </span>

                                        </el-popover>
                                    </div>
                                    <div v-if="showChecked && scope.row[item.prop].value != null && scope.row[item.prop].operationAudit == false" :class="{'inv':scope.row[item.prop].colorStatus==2,'doub':scope.row[item.prop].colorStatus==3,'exa':scope.row[item.prop].colorStatus==4,'diff':scope.row[item.prop].colorStatus==5}">
                                          <el-popover
                                            placement="bottom"
                                            width="50"
                                            v-model='scope.row[item.prop].statusp'
                                            trigger="click">
                                                <div class="operaBox">
                                                    <p @click="detailClick(scope.row,item.prop)">详细情况</p>
                                                </div>
                                            <span class="factorspan" slot="reference" >{{ scope.row[item.prop].value}}
                                              <i class="el-icon-question" v-if="scope.row[item.prop].colorStatus == 2 || scope.row[item.prop].colorStatus == 3" :title="scope.row[item.prop].remark"></i>

                                            </span>
                                          </el-popover>
                                    </div>
                                    <div v-if="!showChecked && scope.row[item.prop].value != null" :class="{'inv':scope.row[item.prop].colorStatus==2,'doub':scope.row[item.prop].colorStatus==3,'exa':scope.row[item.prop].colorStatus==4,'diff':scope.row[item.prop].colorStatus==5}">
                                          <el-popover
                                            placement="bottom"
                                            width="50"
                                            v-model='scope.row[item.prop].statusp'
                                            trigger="click">
                                                <div class="operaBox">
                                                    <p @click="detailClick(scope.row,item.prop)">详细情况</p>
                                                </div>
                                            <span class="factorspan" slot="reference" >{{ scope.row[item.prop].value}}
                                            <i class="el-icon-question" v-if="scope.row[item.prop].colorStatus == 2 || scope.row[item.prop].colorStatus == 3" :title="scope.row[item.prop].remark"></i>
                                            </span>
                                          </el-popover>
                                    </div>
                                    <span v-if="scope.row[item.prop].value == null">--</span>
                                  </template>
                              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
    </div>

    <el-dialog :visible.sync="detailvisiDialog"  width="1100px" title="详细情况" :before-close="closess">
      <transition name="el-fade-in">
        <div class="dialogcontent" v-if="detailvisiDialog">
            <detail-box :fId='fId' :name='name' :fName='fName' :fTime='fTime' :mn='mn' :dateRangeone='dateRange'></detail-box>
        </div>
      </transition>
    </el-dialog>
    <el-dialog :visible.sync="setdatavisiDialog"  width="500px" :title="codeMes" :before-close="codeCancel">
      <div class="dialogcontent" style="padding:5px">
            <yf-tabs type="border-card" style="height:180px" v-model="tabsValue" @tab-click='tabClick'>
                <yf-tab-pane label="描述">
                    <div class="dialog-layout">
                          <ul class="formul">
                                <li>
                                    <div style="width:100%">
                                          <span class="layoutspan">原因 : </span>&emsp;
                                          <div class="layoutBox" style="width:373px">
                                            <el-input v-model="reasonVal" type="textarea" :rows="5"></el-input>
                                          </div>
                                    </div>
                                </li>
                          </ul>
                    </div>

                </yf-tab-pane>
                <yf-tab-pane label="文件上传">
                    <div class="dialog-layout">
                          <ul class="formul">
                                <li>
                                    <span class="layoutspan">文件上传 : </span>&emsp;
                                    <el-upload
                                      class="upload-demo"
                                      ref="upload"
                                      action=""
                                      :on-preview="handlePreview"
                                      :on-remove="handleRemove"
                                      :file-list="fileList"
                                      :http-request='uploadFile'
                                      :auto-upload="false">
                                      <span slot="trigger" class="upload_span_sc"><i class="icon-shangchuan1 iconfont"></i>上传</span>
                                    </el-upload>
                                </li>
                          </ul>
                    </div>
                    <div class="btnbox">
                          <el-button @click="fileSave">保存</el-button>
                    </div>
                </yf-tab-pane>
            </yf-tabs>
      </div>
      <div slot="footer" class="dialog-footer" v-if="tabsValue != '1'">
          <el-button type="noticon" @click="codeSure">确 定</el-button>
          <el-button type="noticonsecondBtn" @click="codeCancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="areasonvisiDialog"  width="500px"  title='审核入库' :before-close="auditCancel">
            <div class="dialog-layout" style="padding:12px">
                  <el-form :model="auditObj" :rules="auditRules" ref="auditForm">
                          <ul class="formul">
                                <li>
                                    <div style="width:100%">
                                          <span class="layoutspan">审核原因 : </span>&emsp;
                                          <div class="layoutBox" style="width:373px">
                                              <el-form-item prop="auditReason">
                                                <el-input v-model="auditObj.auditReason" type="textarea" :rows="5"></el-input>
                                              </el-form-item>
                                          </div>
                                    </div>
                                </li>
                          </ul>
                  </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="noticon" @click="auditSure('auditForm')">确 定</el-button>
                <el-button type="noticonsecondBtn" @click="auditCancel('auditForm')">取 消</el-button>
            </div>
    </el-dialog>
    <el-dialog :visible.sync="rejectvisiDialog"  width="500px"  title='数据驳回' :before-close="rejectCancel">
            <div class="dialogcontent">
              <div class="dialog-layout" style="padding:12px">
                 <el-form :model="rejectObj" :rules="rejectRules" ref="rejectForm">
                          <ul class="formul">
                                <li>
                                    <div>
                                          <span class="layoutspan" style="width:63px">日期 : </span>&emsp;
                                          <div class="layoutBox" style="width:200px;">
                                            <el-form-item prop="rejectDate">
                                                <el-date-picker
                                                  v-model="rejectObj.rejectDate"
                                                  type="date"
                                                  :picker-options="startDateOpt()"

                                                  placeholder="选择日期">
                                                </el-date-picker>
                                             </el-form-item>
                                          </div>
                                    </div>
                                </li>
                                <li>
                                    <div style="width:100%">
                                          <span class="layoutspan">驳回对象 : </span>&emsp;
                                          <div class="layoutBox" style="width:373px;">
                                            <el-form-item prop="rejectcheckList">
                                             <el-checkbox-group v-model="rejectObj.rejectcheckList">
                                                <el-checkbox label="1">一级审核</el-checkbox>
                                                <el-checkbox label="2">二级审核</el-checkbox>

                                              </el-checkbox-group>
                                            </el-form-item>
                                          </div>
                                    </div>
                                </li>
                                <li style="margin-top:10px">
                                    <div style="width:100%">
                                          <span class="layoutspan">驳回原因 : </span>&emsp;
                                          <div class="layoutBox" style="width:373px">
                                            <el-form-item prop="rejectReason">
                                            <el-input v-model="rejectObj.rejectReason" type="textarea" :rows="5"></el-input>
                                            </el-form-item>
                                          </div>
                                    </div>
                                </li>
                          </ul>
                 </el-form>
              </div>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button type="noticon" @click="rejectSure('rejectForm')">确 定</el-button>
                <el-button type="noticonsecondBtn" @click="rejectCancel('rejectForm')">取 消</el-button>
            </div>
    </el-dialog>
  </div>
</template>

<script>

import calender from "../../components/calender/calender";
import detailBox from "./detailComponts";
export default {
  name: "",
  components: { calender, detailBox },
  data() {
    return {
      fId: "",//
      name: "",//控制弹框内导航菜单显示
      fName:'',//因子名称
      mn: "",//站点ID
      dateRange: [],
      loading: true,
      isAudit:true,
      noDataState: false,
      showChecked: false,
      rejectObj: {
        rejectcheckList: [],
        rejectReason: "",
        rejectDate: ""
      }, //数据驳回
      rejectRules: {
        rejectDate: [
          {
            type: "date",
            required: true,
            message: "请选择驳回日期",
            trigger: "change"
          }
        ],
        rejectcheckList: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个驳回对象",
            trigger: "change"
          }
        ],
        rejectReason: [
          { required: true, message: "请输入驳回原因", trigger: "blur" }
        ]
      },
      rejectvisiDialog: false, //数据驳回弹框
      areasonvisiDialog: false, //审核弹框
      evivisiDialog: false, //佐证资料弹出框控制
      evitableData: [], //佐证资料表格数据
      detailvisiDialog: false, //详细情况展示
      setdatavisiDialog: false, //有效数据设置弹框
      popvisible: false,
      tableHead: [],
      tableData: [],
      isCode: "",
      codeMes: "",
      reasonVal: "",
      fileList: [],
      tabsValue: "",
      copyData: [],
      formData: null,
      auditObj: {
        auditReason: "数据已确认" //审核原因
      },
      auditRules: {
        auditReason: [
          { required: true, message: "请输入审核原因", trigger: "blur" }
        ]
      }
    };
  },
  mounted(){


  },
  created() {
    if (this.$route.query.date) {
      this.dateRange = [this.$route.query.date,this.$route.query.date];
    } else {
      let d = new Date().setDate(new Date().getDate() - 1);
      let date = new Date(d).format("yyyy-MM-dd");
      this.dateRange = [date, date];
    };
  },
  methods: {
    getchildDate(val) {
      this.dateRange = [val, val];
    },
    startDateOpt() {
      return {
        disabledDate(time) {
          let _now = new Date().setDate(new Date().getDate() - 1);
          return time.getTime() > _now; //大于当前的禁止
        }
      };
    },
    dateChange() {
      if (this.datedifference(this.dateRange[0], this.dateRange[1]) > 30) {
        this.dateRange = [];
        this.$message({
          message: "最多选择连续30天日期",
          type: "warning",
          duration: 2000
        });
      }
    },
    datedifference(sDate1, sDate2) {
      //sDate1和sDate2是2006-12-18格式
      var dateSpan, tempDate, iDays;
      sDate1 = Date.parse(sDate1);
      sDate2 = Date.parse(sDate2);
      dateSpan = sDate2 - sDate1;
      dateSpan = Math.abs(dateSpan);
      iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
      return iDays + 1;
    },
    handlePreview() {},
    handleRemove() {},
    tabClick() {},
    indexMethod(index) {
      return index + 1;
    },
    closess(done) {
      done();
    },
    //详细情况
    detailClick(scope, prop) {
      scope[prop].statusp = false;
      this.detailvisiDialog = true;
      this.fId = scope[prop].flowId;
      if (scope[prop].name == "w01019" || scope[prop].name == "w21003" || scope[prop].name == "w21011" || scope[prop].name == "w21001") {
        this.name = "datatwo";
      } else {
        this.name = "dataone";
      }
      let t=scope['time'].value;
      t = t.substring(0, t.length - 1);
      this.fTime=t+':00:00';

      this.fName=prop;
    },
    codeClick() {
      this.showChecked = !this.showChecked;
    },
    checked(check) {
      check.statusp = !check.statusp;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //驳回
    reject() {
      this.rejectvisiDialog = true;
    },
    //驳回确认
    rejectSure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let params = new Object();
          params.userId = "12321";
          params.mn = this.mn;
          params.comment = this.rejectObj.rejectReason;
          if (this.rejectObj.rejectcheckList.length == 2) {
            params.reviewPass = 0;
          } else {
            params.reviewPass = parseFloat(this.rejectObj.rejectcheckList.join(","));
          }
          params.date = this.rejectObj.rejectDate.format('yyyy-MM-dd');
          this.$http.get("/DataAudit/dataAudit/rejectDataAudit",{params:params}).then(res => {
              if(res.data.code == 0){
                 this.resetForm("rejectForm");
                 this.rejectvisiDialog = false;
              }

            });
        } else {
          return false;
        }
      });
    },
    //驳回取消
    rejectCancel() {
      this.rejectvisiDialog = false;
      this.rejectcheckList = [];
      this.rejectReason = "";
      this.resetForm("rejectForm");
    },
    //审核
    auditClick() {
      this.areasonvisiDialog = true;
    },
    //审核确认
    auditSure(formName) {
      this.loading=true;
      this.$refs[formName].validate(valid => {
        if (valid) {
           this.areasonvisiDialog = false;
          if(this.isAudit){
            this.isAudit=false;
             let params = new Object();
          params.userId = "12321";
          params.comment = this.auditObj.auditReason;
          params.list = this.tableData;
          this.$http
            .post("/DataAudit/dataAudit/auditCustomerTask", params)
            .then(res => {
               this.isAudit=true;
              if (res.data.code == 0) {
                this.loading=false;
                this.showChecked = false;
                this.searchData();
                this.auditObj.auditReason ="数据已确认";
                this.resetForm(formName);

                this.$message({
                  message: res.data.message,
                  type: "success",
                  duration: 1500
                });
              } else {
                this.$message({
                  message: res.data.message,
                  type: "warning",
                  duration: 1500
                });
                this.loading=false;
                this.showChecked = false;
                this.auditObj.auditReason ="数据已确认";
                this.resetForm(formName);

              }
            }).catch(res=>{
                 this.isAudit=true;
            });
          }

        } else {
          return false;
        }
      });
    },
    //审核取消
    auditCancel(formName) {
      this.areasonvisiDialog = false;
      this.auditObj.auditReason = "";
       this.resetForm(formName);
    },
    uploadFile(file) {
      this.formData.append("file", file.file);
    },
    //文件保存
    fileSave() {
      this.copyData = JSON.parse(JSON.stringify(this.tableData));
      let arr = [];
      for (let i = 0; i < this.copyData.length; i++) {
        for (let v in this.copyData[i]) {
          if (v != "监测时间" && this.copyData[i][v]["status"] == true) {
              arr.push(this.copyData[i][v]["flowId"]);
          }
        }
      }
      this.formData = new FormData();
      this.$refs.upload.submit();
      this.formData.append("userId", "1111");
      this.formData.append("dataId", arr[0]);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      this.$http.post("/DataAudit/dataAudit/saveEvidenceFile", this.formData, config).then(res => {
          if (res.data.code == 0) {
            this.$message({
              message: res.data.message,
              type: "success",
              duration: 1500
            });
          }
        });
    },
    //确定设置有效无效数据
    codeSure() {
      this.copyData = JSON.parse(JSON.stringify(this.tableData));
      let arr = [];
      let str = "";
      //有效标记
      if (this.isCode == "eff") {
        str = "有效数据标记";
        for (let i = 0; i < this.copyData.length; i++) {
          for (let v in this.copyData[i]) {
            if (v != "监测时间") {
              if (this.copyData[i][v]["status"] == true) {
                this.copyData[i][v]["colorStatus"] = 1;
                this.copyData[i][v]["remark"] = this.reasonVal;
                arr.push(this.copyData[i][v]);
              }
            }
          }
        }
      } else if (this.isCode == "inv") {
        //无效标记
        str = "无效数据标记";
        for (let i = 0; i < this.copyData.length; i++) {
          for (let v in this.copyData[i]) {
            if (v != "监测时间" && this.copyData[i][v]["status"] == true) {
              this.copyData[i][v]["colorStatus"] = 2;
              this.copyData[i][v]["remark"] = this.reasonVal;
              arr.push(this.copyData[i][v]);
            }
          }
        }
      }

      let params = new Object();
      params.userId = "12321";
      params.comment = str;
      params.list = arr;
      this.$http.post("/DataAudit/dataAudit/auditCustomer", params).then(res => {
          if (res.data.code == 0) {
            this.showChecked = false;
            this.$message({
              message: res.data.message,
              type: "success",
              duration: 1500
            });
            this.reasonVal = "";
            this.searchData();
          } else {
            this.$message({
              message: res.data.message,
              type: "waring",
              duration: 1500
            });
          }
      });
      this.setdatavisiDialog = false;
    },
    //取消设置
    codeCancel() {
      this.setdatavisiDialog = false;
      this.reasonVal = "";
    },
    //有效标记
    effcodeClick() {
      this.showChecked = true;
      this.isCode = "eff";
      this.codeMes = "设置有效数据";
    },
    //无效标记
    invcodeClick() {
      this.showChecked = true;
      this.isCode = "inv";
      this.codeMes = "设置无效数据";
    },
    //获取表格数据
    searchData() {
      this.loading=true;
      this.showChecked = false;
      this.isCode = "";
      this.codeMes = "";
      this.$http.get("/DataAudit/dataAudit/queryAuditData", {
          params: {
            startTime: this.dateRange[0],
            endTime: this.dateRange[1],
            mn: this.mn
          }
      }).then(res => {
          if (res.data.code == 0) {
            this.loading=false;
            this.tableHead = res.data.content.dataList.head;
            this.tableData = res.data.content.dataList.body;
          }
      });
    },
    //设置无效有效数据
    setData(scope, prop) {
      scope[prop].statusp = false;
      this.setdatavisiDialog = true;
    },
    //行反选
    rowChecked(scope, prop) {
      var allCheck = true;
      for (let i in scope) {
        if (scope[i].status !== undefined) {
          if (scope[i].status == false) {
            allCheck = false;
            break;
          }
        }
      }
      if (allCheck) {
        for (let j in scope) {
          if (scope[j].status !== undefined) {
            scope[j].status = false;
          }
        }
      } else {
        for (let j in scope) {
          if (scope[j].status !== undefined) {
            scope[j].status = true;
          }
        }
      }
      scope[prop].statusp = false;
    },
    //列反选
    colChecked(scope, prop) {
      var allCheck = true;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i][prop].status == false) {
          allCheck = false;
          break;
        }
      }

      if (allCheck) {
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i][prop].status = false;
        }
      } else {
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i][prop].status = true;
        }
      }
      scope[prop].statusp = false;
    }
  },
  computed: {
    stationInfo: {
      get: function() {
        return this.$store.state.stationInfo;
      }
    }
  },
  watch: {
    stationInfo: function(newValue, oldValue) {
      if (newValue.length > 0) {
        this.mn = newValue[0].nodeId;
        this.loading=true;
        this.searchData();
      }
    }
  }
};
</script>

<style scoped lang="less">
.threelevepage {
  height: 100%;
  .containerbox {
    .factorspan {
      display: inline-block;
      cursor: pointer;
      width: 100%;
      line-height: 30px;
      >label{
        display: inline-block;
        width:100%;
      }
    }
    .inv {
      background: #d68787;
    }
    .doub {
      background: #e5a23c;
    }
    .exa {
      background: #7ec514;
    }
    .diff {
      background: #ae00ee;
    }
  }
  .lengbox {
    font-size: 12px;
    color: #586065;
    float: right;
    margin-top: 8px;
    span {
      margin-right: 28px;
      position: relative;
      &::before {
        content: "";
        width: 12px;
        height: 12px;
        position: absolute;
        left: -17px;
        top: 2px;
      }
      &:nth-child(1) {
        &::before {
          background: #7ec514;
        }
      }
      &:nth-child(2) {
        &::before {
          background: #e5a23c;
        }
      }
      &:nth-child(3) {
        &::before {
          background: #d68787;
        }
      }
      &:nth-child(4) {
        &::before {
          background: #ae00ee;
        }
      }
    }
  }
}
.dialogcontent {
  position: relative;
  .btnbox {
    text-align: center;
    position: absolute;
    bottom: 10px;
    width: 100%;
  }
}
.operaBox {
  text-align: center;
  p {
    height: 25px;
    line-height: 25px;
    cursor: pointer;
    &:hover {
      background: #166bce;
      color: #fff;
    }
  }
}
  .el-icon-question{
    color: #333;
    opacity: 0.5;
    font-size: 14px;
  }
</style>
